@import models.Tables.MitochogeneRow
@import models.Tables.MtgeneRow
@(row: MtgeneRow,genbank: String,species:String)(implicit session: Session)
@english.home.main("Mitochondria Gene") {


    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

    <style>
            th {
                width: 20%;
            }

            .myBold {
            }

            .myTd {
                max-height: 150px;
                overflow: auto;
                padding-right: 25px;
            }

            .js-plotly-plot .plotly .cursor-crosshair {
                cursor: default;
            }

            .area_img{
                float: left;
                padding-right: 10px;
            }

        .seq{
            height: 150px;
            overflow: auto;
            padding-right: 25px;
        }

    </style>

    <hgroup class="page-head">
        <h2><span>Gene</span> Info</h2>
    </hgroup>

    <div id="container" class="clearfix" >
        <div id="content" class="full-width container">

            <div class="box">
                <h4 class="area" id="genomeb">
                    <div class="area_img">
                        <i class="fa fa-minus"></i>
                    </div>
                    <span class="area_title" data-id="1">Basic</span>
                </h4>
                <div class="picture_list">

                    <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
                        word-wrap: break-word">
                        <tbody>
                            <tr>
                                <th>Gene Name</th>
                                <td>
                                @row.geneid
                                </td>
                            </tr>

                            <tr>
                                <th>Species</th>
                                <td>
                                @species.split("_").mkString(" ")
                                </td>
                            </tr>

                            <tr>
                                <th>GenBank</th>
                                <td>
                                @genbank
                                </td>
                            </tr>
                            <tr>
                                <th>Length</th>
                                <td>
                                    @(row.end-row.start)
                                </td>
                            </tr>
                            <tr>
                                <th>Strand</th>
                                <td>
                                @row.strand
                                </td>
                            </tr>
                            <tr>
                                <th>Gene Name</th>
                                <td>@row.geneName</td>
                            </tr>
                            <tr>
                                <th>Product</th>
                                <td>@row.product</td>
                            </tr>
                            <tr>
                                <th>Note</th>
                                <td>@row.note</td>
                            </tr>

                            <tr>
                                <th>Genome Browse</th>
                                <td>
                                    <a href="http://210.22.121.250:20795/jb/index.html?data=my_data/PODB/MT/@{genbank.split('.').head}/data&loc=@{genbank.split('.').head}:@row.start..@row.end&tracks=DNA,Annotation" target="_blank">
                                        @genbank:@row.start..@row.end
                                    </a>

                                </td>
                            </tr>

                        </tbody>
                    </table>

                </div>
            </div>

            <div class="box">
                <h4 class="area">
                    <div class="area_img">
                        <i class="fa fa-minus"></i>
                    </div>
                    <span class="area_title" data-id="1">Genome Browse</span>
                </h4>
                <div class="picture_list">
                    <iframe style="border: 1px solid rgb(80, 80, 80);" src="http://210.22.121.250:20795/jb/index.html?data=my_data/PODB/MT/@{genbank.split('.').head}/data&loc=@{genbank.split('.').head}:@row.start..@row.end&tracks=DNA,Annotation&tracklist=0&nav=1&overview=0"
                    height="250" width="100%" name="jbrowse_iframe" id="iframe">
                    </iframe>

                </div>
            </div>


            <div class="box">
                <h4 class="area">
                    <div class="area_img">
                        <i class="fa fa-minus"></i>
                    </div>
                    <span class="area_title" data-id="1">Sequence</span>
                </h4>
                <div class="picture_list">
                    <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
                        word-wrap: break-word">
                        <tbody>
                            <tr>
                                <th>Cds
                                    <button class="btn-link" onclick="downloadCds()"><i class="fa fa-download"></i></button>
                                </th>
                                <td class="monospace">
                                    <div class="seq">
                                        <div id="cds" style="width: 350px">

                                        </div>
                                    </div>

                                </td>
                            </tr>
                            <tr>
                                <th>PROTEIN
                                    <button class="btn-link" onclick="downloadPep()"><i class="fa fa-download"></i></button>
                                </th>
                                <td class="monospace">
                                    <div class="seq">
                                        <div id="pep" style="width: 350px">

                                        </div>
                                    </div>

                                </td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>


        </div>
    </div>


    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>


    <script>
            $(function () {
                $.ajax({
                    url:"/US/PODB/mitochondria/getMtSeqs?gene=@{genbank}&range=@row.geneid",
                    type:"get",
                    success:function (data) {
                        $("#cds").html(data.cds);
                        $("#pep").html(data.pep);
                    }
                })
            })


            function downloadCds() {
                var fileName = "@row.geneid" + "_cds.fa";
                var content = ">@row.geneid\n" + $("#cds").text().trim();
                var blob = new Blob([content], {
                    type: "text/plain;charset=utf-8"
                });
                saveAs(blob, fileName)
            }

            function downloadPep() {
                var fileName = "@row.geneid" + "_pep.fa";
                var content = ">@row.geneid\n" + $("#pep").text().trim();
                var blob = new Blob([content], {
                    type: "text/plain;charset=utf-8"
                });
                saveAs(blob, fileName)
            }

            $("#genomeb").click(function () {
                var img = $(this).find("i").attr("class");
                if(img.indexOf("minus") === -1){
                    $('#iframe').attr('src', $('#iframe').attr('src'));
                }
            });
    </script>
}